<template>
	<gui-page :customHeader="true">
		<template v-slot:gHeader>
			<!-- #ifdef MP -->
			<view style="height:20px;"></view>
			<!-- #endif -->
		</template>
		<template v-slot:gBody>
			<view class="ps gui-bg-white" style="z-index: 100;">
				<!-- 轮播图  -->
				<view class="gui-bg-white">
					<gui-swiper :swiperItems="swiperItems" :spacing="0" :padding="0" borderRadius="0rpx" :width="750"
						:height="420"></gui-swiper>
				</view>
				<!-- 切换导航 -->
				<view class="gui-border-b gui-padding-small">
					<gui-switch-navigation :items="navItems" :isCenter="true" :size="180" lineHeight="60rpx" width="750"
						textAlign="center" activeLineWidth="180rpx" activeLineHeight="4rpx"
						:activeLineClass="['gui-gtbg-red']" :margin="10" @change="navChange"></gui-switch-navigation>
				</view>
			</view>
			<!-- 商品标题 分享按钮 -->
			<view v-if="active==0"
				class="gui-padding gui-flex gui-row gui-space-between gui-align-items-center gui-bg-white gui-dark-bg-level-3">
				<text class="gui-h5 gui-block product-name gui-block">{{product.name}}</text>
				<view class="product-share" @tap="share">
					<text class="product-share gui-icons gui-color-orange">&#xe622;</text>
				</view>
			</view>
			<!-- 价格 -->
			<view v-if="active==0" class="gui-padding gui-bg-white gui-dark-bg-level-3"
				style="margin-top:10rpx;padding-bottom: 20px;">
				<view class="gui-flex gui-row gui-nowrap gui-align-items-center gui-space-between">
					<view>
						<text class="product-price">￥{{product.price}}</text>
						<text class="gui-text gui-color-gray gui-line-through"
							style="margin-left:30rpx;">￥{{product.priceMarket}}</text>
					</view>
					<view class="gui-box-tags">
						<text class="tag icon-tag-dj">独家</text>
						<text class="tag icon-tag-lz">连载</text>
					</view>	
				</view>
				<view class="gui-flex gui-row gui-nowrap gui-align-items-center gui-space-between mt5">
					<text class="gui-text-small gui-color-gray">运费 ￥0.00</text>
					<text class="gui-text-small gui-color-gray">已售 21008 件</text>
					<text class="gui-text-small gui-color-gray">浏览 36万次</text>
				</view>
			</view>
			<!-- 详情 请根据项目情况自行改进 可以使用 富文本-->
			<view class="gui-padding markdown-body" style="border-top: 5px solid #eee!important;" v-if="active == 0">
				<rich-text :nodes="nodeArr"></rich-text>
			</view>

			<!-- 评论 请复制我们提供的评论布局来实现 -->
			<view  style="border-top: 5px solid #eee!important;" v-if="active == 1">
				<cc-course-chapter></cc-course-chapter>
			</view>

			<!-- 评论 请复制我们提供的评论布局来实现 -->
			<view class="gui-padding-small" style="border-top: 5px solid #eee!important;" v-if="active == 2">
				<view style="margin-top:30rpx;"
					class="gui-comments-items gui-flex gui-row gui-nowrap gui-space-between gui-bg-white gui-dark-bg-level-3"
					v-for="(item, index) in commentContents" :key="index">
					<image :src="item.face" class="gui-comments-face"></image>
					<view class="gui-comments-body">
						<view class="gui-flex gui-row gui-nowrap gui-space-between gui-align-items-center">
							<text class="gui-comments-header-text gui-text gui-primary-color">{{item.name}}</text>
							<text class="gui-comments-header-text gui-icons gui-color-gray gui-text-small"
								:class="[item.isPraise ? 'gui-primary-color' : '']">&#xe6ea; {{item.praise}}</text>
						</view>
						<text class="gui-comments-content gui-block">{{item.content}}</text>
						<view class="gui-comments-imgs gui-flex gui-rows gui-wrap"
							v-if="item.imgs && item.imgs.length > 0">
							<view class="gui-comments-image" v-for="(img, indexImg) in item.imgs" :key="indexImg"
								@click.stop="showImgs(index, indexImg)">
								<image :src="img" :width="180" mode="aspectFill" />
							</view>
						</view>
						<view v-if="item.Reply">
							<text v-for="(itemRe, indexRe) in item.Reply" :key="indexRe"
								class="gui-comments-replay gui-block gui-bg-gray gui-dark-bg-level-2">{{itemRe.name}} :
								{{itemRe.content}}</text>
						</view>
						<view
							class="gui-comments-info gui-flex gui-rows gui-nowrap gui-space-between gui-align-items-center">
							<text class="gui-comments-info-text gui-color-gray">{{item.date}}</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 底部 -->
			<view class="product-footer gui-bg-white gui-dark-bg-level-3">
				<!-- 属性选择 -->
				<scroll-view class="product-attr" :scroll-y="true" v-if="attrShow">
					<view class="gui-flex gui-row gui-space-between">
						<text class="gui-text gui-color-gray">选择颜色</text>
						<text class="gui-color-gray gui-h5 gui-icons" @tap="closeAttr">&#xe632;</text>
					</view>
					<view class="gui-margin-top">
						<gui-stags :tags="colors" @change="colorChange"></gui-stags>
					</view>
					<view class="gui-margin-top">
						<text class="gui-text gui-color-gray">选择尺寸</text>
					</view>
					<view class="gui-margin-top">
						<gui-stags :tags="sizes" @change="sizeChange"></gui-stags>
					</view>
					<view class="gui-margin-top">
						<text class="gui-text gui-color-gray">购买数量</text>
					</view>
					<view class="gui-margin-top">
						<gui-step-box :value="1" @change="numberChange"></gui-step-box>
					</view>
				</scroll-view>
				<!-- 底部按钮栏 -->
				<view class="gui-flex gui-row gui-space-between gui-align-items-center gui-border-t">
					<!-- 2个底部按钮 -->
					<view class="gui-footer-icon-buttons" style="margin-left:30rpx;" hover-class="gui-tap"
						@tap="goHome">
						<text class="gui-footer-icon-buttons-icon gui-block gui-icons gui-color-black2">&#xe63b;</text>
						<text class="gui-footer-icon-buttons-text gui-block gui-icons gui-color-black2">首页</text>
					</view>
					<view class="gui-footer-icon-buttons" hover-class="gui-tap" @tap="kf">
						<text class="gui-footer-icon-buttons-icon gui-block gui-icons gui-color-black2">&#xe60a;</text>
						<text class="gui-footer-icon-buttons-text gui-block gui-icons gui-color-black2">购物车</text>
					</view>
					<!-- 2个大按钮 -->
					<view
						class="gui-footer-large-buttons gui-flex1 gui-flex gui-row gui-nowrap gui-justify-content-end">
						<view class="gui-footer-large-button gui-bg-red" style="border-radius:50rpx;width: 200px;"
							hover-class="gui-tap" @tap="buynow">
							<text
								class="gui-text gui-text-center gui-block gui-color-white gui-footer-large-button-text"><text class="gui-icons mr5">&#xe60a;</text>立即购买</text>
						</view>
					</view>
				</view>
				<gui-iphone-bottom></gui-iphone-bottom>
			</view>
			<!-- 底部占位 -->
			<view style="height:120rpx;"></view>
			<view class="um-cps-ux-promoter-course-detail-collect f-pa">
				<view @click="share" class="um-cps-ux-promoter-course-detail-collect_btn">分享赚￥39.8</view>
				<view class="um-cps-ux-promoter-course-detail-collect-bubble f-pa" v-if="closemask">
					<image src="/static/imgs/tip.png" style="width: 190px;height: 50px" />
					<view class="um-cps-ux-promoter-course-detail-collect-bubble_info f-pa">点击可获得专属分享链接</view>
				</view>
			</view>
			<view @click="closemask=false" class="ux-mask ux-promoter-course-detail-collect-mask ux-modal-fadeIn"
				v-if="closemask"></view>
		</template>
	</gui-page>
</template>
<script>
	import parserHtml from "@/Grace6/js/parserHTML.js";
	var face =
		"https://images.unsplash.com/photo-1663717249250-804cb861ed74?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw5M3x8fGVufDB8fHx8&auto=format&fit=crop&w=100&q=80";
	var img =
		"https://images.unsplash.com/photo-1661956601349-f61c959a8fd4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHw5N3x8fGVufDB8fHx8&auto=format&fit=crop&w=300&q=60";
	export default {
		data() {
			return {
				closemask: true,
				nodeArr: [],
				nodes: `<img src='/static/imgs/bg2.jpg'/><img src='/static/imgs/bg3.webp'/><img src='/static/imgs/bg4.webp'/><h1>23423</h1><p class="m-introImage u-coursebriefintro-content">
			<img src="https://img30.360buyimg.com/sku/jfs/t21838/18/2275707529/311540/cba1d04c/5b4f155fNac3aa2f0.jpg"/>
                        <img src="https://img30.360buyimg.com/sku/jfs/t21838/18/2275707529/311540/cba1d04c/5b4f155fNac3aa2f0.jpg" data-src="//study-image.nosdn.127.net/4c49087e146c43b6b8de5b1c989f1597.jpg?imageView&amp;quality=100&amp;type=webp" class="intro-img" id="auto-id-1707016924515" style="width: 100%;">
                    </p><p class="txt f-course-grey u-coursebriefintro-content ">
					<img src="https://img30.360buyimg.com/sku/jfs/t22021/327/2281785192/48707/57806074/5b4f1579Nae7adb49.jpg"/>
					<img src="https://img30.360buyimg.com/sku/jfs/t21682/256/2344553276/204456/cf7a2ddb/5b4ffbbfN48c54307.jpg"/>
          <span>2022年8月份开始，课程第5次更新已经开始，这次会颠覆之前所有课程，全面升级玩法，即将涨价！<br>具体可看详情介绍<br>现在的自媒体短视频，就像淘宝刚开始时期，特别好做，但很多人不做或不知道怎么做，确实，现在入局自媒体短视频还不晚，再等等就肯定会晚。<br>国人都感觉到了，现在是新媒体时代，个人自媒体和短视频兴起，头条，抖音，快手&nbsp;直播&nbsp;网红&nbsp;带货时代早已到来，一条带货视频一晚上带来百万收益，一场直播盈利百万&nbsp;千万&nbsp;甚至过亿，不管你现在是不是认可，是实实在在发生在我们身边的事情！有人通过新媒体短视频正闷声发大财，月入百万&nbsp;千万甚至更多，有人却还根本没有找到进入的大门。<br>当你想做自媒体和短视频创业时，有没有这种感觉？①想做新媒体和短视频，却不知道从哪下手?②学习资料太多，不知道该学什么?③新媒体短视频做起来迷茫，不懂规则，内容不推荐，阅读量，播放量低，不会写爆款文章，写标题，拍视频，剪辑视频...<br>不用发愁了，来学习本套课程，他会带你入局新媒体和短视频，掌握自媒体和短视频必备实用技能，开启你不一样人生，<br>客服微信：1534728904</span>
        </p>`,
				// 轮播图 
				swiperItems: [{
						img: '/static/imgs/bg.jpg',
						url: '',
						opentype: 'navigate'
					},
					{
						img: '/static/imgs/bg.jpg',
						url: '',
						opentype: 'navigate'
					}
				],
				// 商品信息
				product: {
					name: "小米 MIX3 一面科技 一面艺术 ( 磁动力滑盖全面屏 | 故宫特别版 )",
					logo: "../../static/logo.png",
					price: 3188,
					priceMarket: 3200,
					imgs: []
				},
				// 切换导航
				navItems: [{
					id: 1,
					name: '简介'
				}, {
					id: 2,
					name: '目录'
				}, {
					id: 3,
					name: '评价'
				}],
				// 切换索引
				active: 0,
				// 属性选择
				attrShow: false,
				colors: [{
						id: 1,
						text: "红色",
						checked: false
					},
					{
						id: 2,
						text: "黑色",
						checked: false
					},
					{
						id: 3,
						text: "蓝色",
						checked: false
					}
				],
				sizes: [{
						id: 1,
						text: "10 cm",
						checked: false
					},
					{
						id: 2,
						text: "20 cm",
						checked: false
					},
					{
						id: 3,
						text: "40 cm",
						checked: false
					}
				],
				// 属性记录
				attrRes: {
					color: null,
					size: null,
					number: 1
				},
				commentContents: [{
						"content": "故国三千里，深宫二十年。一声何满子，双泪落君前。",
						"name": "回复昵称",
						"face": face,
						"date": "08/10 08:00",
						"praise": 188,
						"isPraise": false,
						"Reply": [{
								'name': "张晓曦",
								"content": "不错不错"
							},
							{
								'name': "王大陆",
								"content": "赞了~"
							},
						]
					},
					{
						"content": "而今渐行渐远，渐觉虽悔难追。漫寄消寄息，终久奚为。也拟重论缱绻，争奈翻覆思维。纵再会，只恐恩情，难似当时。",
						"name": "路过繁华",
						"face": face,
						"date": "02/10 18:00",
						"praise": 288
					},
					{
						"content": "图片回复，点击图片可以预览......",
						"name": "林夕阳",
						"imgs": [
							'https://img30.360buyimg.com/sku/jfs/t21838/18/2275707529/311540/cba1d04c/5b4f155fNac3aa2f0.jpg',
							'https://img30.360buyimg.com/sku/jfs/t21838/18/2275707529/311540/cba1d04c/5b4f155fNac3aa2f0.jpg'
						],
						"face": face,
						"date": "08/12 09:00",
						"praise": 955,
						"isPraise": true
					}
				]
			}
		},

		created() {
			this.nodeArr = parserHtml.parserHTML(this.nodes)
		},

		methods: {
			// 分享
			share: function() {
				uni.navigateTo({
					url:"/pages/share/share"
				})
			},
			// 导航切换
			navChange: function(e) {
				this.active = e;
			},
			// 返回首页
			goHome: function() {
				uni.switchTab({
					url: "/pages/tabbar/index"
				});
			},
			// 返回首页
			kf: function() {
				uni.showToast({
					title: '加入购物车成功',
					icon: "none"
				})
				uni.navigateTo({
					url: "/pages/shopcart/shopcart"
				});
			},
			// 加入购物车
			addtocard: function() {
				// 选择属性
				this.selectAttr();
			},
			// 购买 
			buynow: function() {
				uni.navigateTo({
					url: "/pages/order/confirm"
				})
			},
			// 属性选择
			selectAttr: function() {
				// 未选择属性弹出选择
				if (!this.attrShow) {
					this.attrShow = true;
					return;
				}
				// 已选择属性进行订单提交
				// 属性在 attrRes 变量内保存
				if (this.attrRes.color == null || this.attrRes.size == null) {
					uni.showToast({
						icon: "none",
						title: "请选择属性"
					});
				}
				console.log('请完善提交代码');
			},
			colorChange: function(e) {
				this.attrRes.color = e.text;
			},
			sizeChange: function(e) {
				this.attrRes.size = e.text;
			},
			numberChange: function(e) {
				this.attrRes.number = e[0];
			},
			closeAttr: function() {
				this.attrShow = false;
			},
			showImgs: function(commentsIndex, imgIndex) {
				console.log(commentsIndex, imgIndex);
				uni.previewImage({
					urls: this.commentContents[commentsIndex].imgs,
					current: this.commentContents[commentsIndex].imgs[imgIndex]
				})
			}
		}
	}
</script>
<style scoped lang="scss">
	.product-name {
		width: 560rpx;
		line-height: 50rpx;
	}

	.product-share {
		width: 80rpx;
		height: 80rpx;
		text-align: center;
		font-size: 50rpx;
		color: #FF7900;
		line-height: 80rpx;
	}

	.product-price {
		color: #FF7900;
		line-height: 60rpx;
		font-size: 30rpx;
		font-weight: bold;
	}

	.gui-common-line {
		height: 18rpx;
	}

	.product-footer {
		position: fixed;
		z-index: 99;
		left: 0;
		bottom: 0;
		width: 750rpx;
	}

	.product-attr {
		width: 700rpx;
		margin: 25rpx;
		height: 580rpx;
	}

	.gui-padding {
		padding: 20rpx 25rpx;
	}

	.gui-footer-icon-buttons {
		width: 100rpx;
	}

	/* 评论相关样式 */
	.gui-comments-items {
		padding: 30rpx;
	}

	.gui-comments-face {
		width: 80rpx;
		height: 80rpx;
		border-radius: 80rpx;
		margin-right: 25rpx;
	}

	.gui-comments-body {
		width: 580rpx;
		overflow: hidden;
	}

	.gui-comments-header-text {
		line-height: 40rpx;
	}

	.gui-comments-info {
		margin-top: 2px;
	}

	.gui-comments-info-text {
		font-size: 22rpx;
		line-height: 40rpx;
		margin-top: 10rpx;
	}

	.gui-comments-content {
		line-height: 36rpx;
		font-size: 26rpx;
		padding: 8rpx 0;
	}

	.gui-comments-replay {
		font-size: 24rpx;
		border-radius: 3px;
		margin: 3px 0;
		padding: 15rpx;
		line-height: 36rpx;
	}

	.gui-comments-replay-btn {
		font-size: 20rpx;
		line-height: 44rpx;
		padding: 0rpx 20rpx;
		border-radius: 44rpx;
	}

	.gui-comments-imgs {
		margin: 8rpx 0;
	}

	.gui-comments-image {
		width: 180rpx;
		height: 128rpx;
		margin-right: 10rpx;
		margin-bottom: 10rpx;
		font-size: 0;
		overflow: hidden;
	}

	.ux-mask {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 1000;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		touch-action: cross-slide-y pinch-zoom double-tap-zoom;
		text-align: center;
		background: rgba(0, 0, 0, 0.3);
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4c000000, endColorstr=#4c000000);
	}

	.ux-promoter-course-detail-collect-mask {
		background: rgba(0, 0, 0, 0.6) !important;
	}

	.ux-mask:before {
		content: '';
		display: inline-block;
		vertical-align: middle;
		height: 100%;
	}

	.um-cps-ux-promoter-course-detail-collect {
		top: 2rem;
		right: 0;
		position: fixed;
		z-index: 1006;
	}

	.um-cps-ux-promoter-course-detail-collect_btn {
		font-family: MicrosoftYaHei;
		font-size: 13px;
		color: #FFFFFF;
		padding: 10px 20px;
		background: #FF4400;
		border-radius: 50px 0 0 50px;
	}

	.um-cps-ux-promoter-course-detail-collect-bubble {
		width: 180px;
		right: 15px;
		top: 38px;
	}

	.um-cps-ux-promoter-course-detail-collect-bubble img {
		width: 100%;
	}

	.um-cps-ux-promoter-course-detail-collect-bubble_info {
		top: 21px;
		font-size: 14px;
		color: #fff;
		left: 13px;
	}

	.f-pa {
		position: absolute;
	}
	
	.gui-box-tags{font-size:26rpx;
		.tag{border:1px solid #eee;border-radius: 6rpx;padding:6rpx 16rpx;margin-left: 5px;color:#666;}
	}
</style>